/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import ReactSelect from 'react-select';
import * as InputRange from 'react-input-range';
// @require 'react-input-range/dist/react-input-range.css';
// jest 不能支持这种写法
// import 'react-input-range/dist/react-input-range.css';

// @require 'react-select/dist/react-select.css';
// jest 不能支持这种写法
// import 'react-select/dist/react-select.css';

import './repeat.scss';
import {Enhance as FormItem} from '../form-item';

const LANG = {
  'secondly': '秒',
  'minutely': '分',
  'hourly': '时',
  'daily': '天',
  'weekdays': '周中',
  'weekly': '周',
  'monthly': '月',
  'yearly': '年'
};

@FormItem({
  type: 'repeat',
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/formItem'
})
export default class RepeatInput extends PureComponent {
  static propTypes = {
    className: PropTypes.string
  };

  static defaultProps = {
    // options: 'secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly'
    options: 'hourly,daily,weekly,monthly',
    placeholder: '不重复'
  };

  constructor(props) {
    super(props);

    this.handleOptionChange = this.handleOptionChange.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleOptionChange(option) {
    this.props.setValue(option.value);
  }

  handleChange(value) {
    const option = this.props.getValue();
    const parts = option ? option.split(':') : [];
    this.props.setValue(`${parts[0]}:${value}`);
  }

  renderInput() {
    const value = this.props.getValue();
    const parts = value ? value.split(':') : [];
    let {
      options,
      placeholder,
      disabled
    } = this.props;

    options = options.split(',').map(key => ({
      label: LANG[key],
      value: key
    }));

    options.unshift({
      label: placeholder,
      value: ''
    });

    let input;

    parts[1] = parseInt(parts[1], 10) || 1;
    switch (parts[0]) {
      case 'secondly':
        input = (
          <InputRange
            key="input"
            value={parts[1]}
            minValue={1}
            step={5}
            maxValue={60}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
      case 'minutely':
        input = (
          <InputRange
            key="input"
            value={parts[1]}
            minValue={1}
            step={5}
            maxValue={60}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
      case 'hourly':
        input = (
          <InputRange
            key="input"
            value={parts[1]}
            minValue={1}
            step={1}
            maxValue={24}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
      case 'daily':
        input = (
          <InputRange
            key="input"
            value={parts[1]}
            minValue={1}
            step={1}
            maxValue={30}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
      case 'weekly':
        input = (
          <InputRange
            key="input"
            value={parts[1]}
            minValue={1}
            step={1}
            max={12}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
      case 'monthly':
        input = (
          <InputRange
            key="input"
            value={parts[1]}
            minValue={1}
            step={1}
            maxValue={12}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
      case 'yearly':
        input = (
          <InputRange
            key="input"
            className="v-middle"
            value={parts[1]}
            minValue={1}
            step={1}
            maxValue={20}
            disabled={disabled}
            onChange={(c, value) => this.handleChange(value)}
          />
        );
        break;
    }

    return (
      <div className="repeat-control hbox">
        {input ? (
          <div className="col v-middle" style={{width: 30}}>
            <span>每</span>
          </div>
        ) : null}

        {input ? (
          <div className="col v-middle">
            {input}
          </div>
        ) : null}

        <div className="col v-middle w-xs">
          <ReactSelect
            className={input ? 'pull-right' : null}
            options={options}
            placeholder={placeholder}
            onChange={this.handleOptionChange}
            value={parts[0]}
            clearable={false}
            autosize={false}
            searchable={false}
            disabled={disabled}
          />
        </div>
      </div>
    );
  }

  render() {

    return (
      <div key="input">{this.renderInput()}</div>
    );
  }
}

function buildDefaultValue(columns, rows) {
  return columns.map(column => rows.map(row => assign({}, column, row, {
    checked: false
  })));
}
